<template>
  <view class="detail-container">
    <!-- 顶部文字区域 -->
    <view class="header-section">
      <view class="title-box">
        <text class="main-title">{{
          counterStore.selectedInvention?.title || "物理发明"
        }}</text>
      </view>
      <view class="desc-box">
        <text class="description">{{
          counterStore.selectedInvention?.details.fullDescription || ""
        }}</text>
      </view>
    </view>

    <!-- 第一部分：早期形制 -->
    <view class="content-section">
      <view class="section-title">
        <text class="title-icon">◈</text>
        <text class="">{{
          counterStore.selectedInvention?.details?.sections[0]?.title || ""
        }}</text>
      </view>
      
      <view class="content-box">
        <!-- 左侧图片 -->
        <view class="image-box">
          <image
            :src="url('td', counterStore.selectedInvention?.details.sections[0].image-1, 'png')"
            mode="aspectFit"
            class="main-image"
          />
        </view>
        <!-- 右侧文字 -->
        <view class="text-box">
          <text class="content-text">{{
            counterStore.selectedInvention?.details?.sections[0]?.content || ""
          }}</text>
        </view>
      </view>
    </view>

    <!-- 第二部分：司南部分 -->
    <view class="content-section">
      <view class="section-title">
        <text class="title-icon">◈</text>
        <text >{{
          counterStore.selectedInvention?.details?.sections[1]?.title || ""
        }}</text>
      </view>
      
      <view class="content-box">
        <!-- 左侧图片 -->
        <view class="image-box">
          <image
            :src="url('td', counterStore.selectedInvention?.details.sections[1].image-1 , 'png')"
            mode="aspectFit"
            class="main-image"
          />
        </view>
        <!-- 右侧文字 -->
        <view class="text-box">
          <text class="content-text">{{
            counterStore.selectedInvention?.details?.sections[1]?.content || ""
          }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted, computed } from "vue";
import { useCounterStore } from "@/stores/counter.js";

const url = $url;
const counterStore = useCounterStore();

const imageIndex = computed(() => {
  return counterStore.getInventionIndex(counterStore.selectedInvention.title);
});

function goBack() {
  uni.navigateBack();
}
</script>

<style scoped>
.detail-container {
  min-height: 100vh;
  background-color: #f4e9d7;
  padding: 30rpx;
}

.header-section {
  margin-bottom: 40rpx;
  padding: 30rpx;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 16rpx;
}

.title-box {
  text-align: center;
  margin-bottom: 30rpx;
}

.main-title {
  font-size: 48rpx;
  font-weight: bold;
  color: #333;
  background-color: var(--td-bg-color);
  padding: 20rpx 40rpx;
  border-radius: 8rpx;
  display: inline-block;
}

.desc-box {
  padding: 20rpx;
  background-color: #fff;
  border-radius: 8rpx;
  border: 1px solid #d3c5a9;
}

.description {
  font-size: 28rpx;
  line-height: 1.8;
  color: #333;
  display: block;
}

.title-icon {
  color: var(--td-brand-color);
  margin-right: 10rpx;
  font-size: 32rpx;
}

.content-box {
  display: flex;
  gap: 40rpx;
  align-items: flex-start;
}

.image-box {
  flex-shrink: 0;
  width: 280rpx;
}

.main-image {
  width: 280rpx;
  height: 280rpx;
  object-fit: contain;
  background-color: #fff;
  border: 1px solid #d3c5a9;
  padding: 10rpx;
  border-radius: 8rpx;
}

.text-box {
  flex: 1;
  background-color: #fff;
  border-radius: 8rpx;
  border: 1px solid #d3c5a9;
  padding: 20rpx;
}

.content-text {
  font-size: 28rpx;
  line-height: 1.8;
  color: #333;
  display: block;
}
</style>
